<template>
  <el-echarts height="400" theme="green" :option="option"></el-echarts>
</template>
<script>
export default {
  components: {},
  props: {
    addressCode: String,
    startTime: String,
    endTime: String,
  },
  data() {
    return {
      api: '/industrial/pc/org/class/',
      option: null,
    }
  },
  computed: {
    orgAddress() {
      return this.addressCode || this.$store.getters.org.addressCode || '520000000000'
    },
    url() {
      return `${this.api}?addressCode=${this.orgAddress}&startTime=${
        this.startTime || ''
      }&endTime=${this.endTime || ''}`
    },
  },
  watch: {
    addressCode() {
      this.getData()
    },
  },
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    async getData() {
      let [res, err] = await this.$utils.promise(this.$http.get(this.url))
      if (err) return

      const data = res.data

      const chartData = {
        legend: data.orgClassArr,
        data: [],
      }
      for (let i = 0; i < data.orgClassArr.length; i++) {
        chartData.data.push({
          value: data.orgClassCountList[i],
          name: data.orgClassArr[i],
        })
      }

      this.option = {
        title: {
          text: '组织形式分析',
          subtext: '农业主体的组织结构反应了该地区农业主体的组成分布情况',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        toolbox: {
          show: true,
          x: 'right',
          feature: {
            saveAsImage: {
              show: true,
            },
            dataView: {
              show: true,
              readOnly: true,
            },
          },
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          show: false,
          data: chartData.legend,
        },
        series: [
          {
            name: '组织形式分析',
            type: 'pie',
            radius: '40%',
            center: ['50%', '50%'],
            clockwise: false,
            data: chartData.data,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
            label: {
              normal: {
                show: true,
                formatter: '{b}\n({c} - {d}%)',
              },
            },
          },
        ],
      }
    },
  },
}
</script>
<style scoped></style>
